import './style.scss'
import { UserOutlined} from '@ant-design/icons';
import { Input} from 'antd';
import React from 'react';
import { Component } from 'react';
import {loginAdmin} from '../../api/admin'
import { message } from 'antd';
import {connect} from 'react-redux';
import withRouter from '../../util/withRouter'
import { setAdminInfo} from '../../store/adminSlice'
class Login extends Component {
    state = {
        name:'',
        pwd:''
    }
    handlelogin=async()=>{

        if(!this.state.name) return message.info('账号或密码有误')
        if(!this.state.pwd) return message.info('账号或密码有误')

        let res = await loginAdmin({
            name:this.state.name,
            pwd:this.state.pwd
        })
        this.props.dispatch(setAdminInfo(res.data))
        this.props.navigate('/index',{replace:true})
    }
    render(){
        return(
            <div className='bg'>
            <div className='login'>账号
            <Input placeholder="请输入账号" prefix={<UserOutlined />} value = {this.state.name} 
            onChange={ev=>this.setState({name:ev.target.value})}/>
            <br/>
            密码
            <Input.Password placeholder="请输入密码" value={this.state.pwd} 
            onChange={ev=>this.setState({pwd:ev.target.value})}/>
            <br/>
            <button onClick={this.handlelogin}>登录</button>
            </div>
            </div>
        )
    }
    
}
const mapStateToProps = (state)=>({...state})
export default connect(mapStateToProps)(withRouter(Login))